<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <title>Document</title>
  <style media="screen">
  .fade-enter-active, .fade-leave-active {
      transition:  .5s
      }
      .fade-enter, .fade-leave-active {
      opacity: 0
      }
  </style>
</head>
<body class="addHtml">
  <div class="shoppingCar">
    <div class="shoppingCarClick">
      <p class="shoppingCarLogo">
        <img src="imgs/gouwuLogo.png" alt="" >
      </p>
      <p class="shoppingText">
        <img src="imgs/konggouwuche.png" alt="">
        <p class="shoppingTextItem" id="shoppingTextItem">购物车
          <span class="shopoingCount">0</span>
        </p>
      </p>
      <a href="#" class="shopoingBackBtn">
        <img src="imgs/back_btn.png" alt="">
      </a>
    </div>
    <div class="shoppingCarTable">
      <div class="shoppingCarTable_item shoppingCarTable_item_tongchen">
        <div class="shoppingCarTable_item_shop">
          <label><input type="checkbox"  class="tongchen_checked" >同城订单</label>
          <span class="tongchen_zongPrice">￥188</span>
        </div>
        <ul class="shoppingCarTable_item_shop_select">
          <li><input type="checkbox" name="" value="" class="tongchen_list_item select_list_item"></li>
          <li>
            <a href="#" class="shoppingCarTable_item_shop_pro">
              <img src="imgs/proItem.png" alt="">
            </a>
          </li>
          <li><span>淘宝或者地纳普淘宝或者地纳普淘宝或者地纳普</span></li>
          <li>
            <span class="shoppingCarTable_item_shop_pro_add"></span>
            <span class="shoppingCarTable_item_shop_pro_add_number">1</span>
            <span class="shoppingCarTable_item_shop_pro_remover"></span>
          </li>
          <li class="shoppingCarTable_item_shop_pro_price">￥<span>188</span></li>
        </ul>
        <ul class="shoppingCarTable_item_shop_select">
          <li><input type="checkbox" name="" value="" class="tongchen_list_item select_list_item"></li>
          <li>
            <a href="#" class="shoppingCarTable_item_shop_pro">
              <img src="imgs/proItem.png" alt="">
            </a>
          </li>
          <li><span>淘宝或者地纳普淘宝或者地纳普淘宝或者地纳普</span></li>
          <li>
            <span class="shoppingCarTable_item_shop_pro_add"></span>
            <span>1</span>
            <span class="shoppingCarTable_item_shop_pro_remover"></span>
          </li>
          <li class="shoppingCarTable_item_shop_pro_price">￥<span>188</span></li>
        </ul>
      </div>
      <div class="shoppingCarTable_item shoppingCarTable_item_daigou">
        <div class="shoppingCarTable_item_shop">
          <label><input type="checkbox" class="daigou_checked" >代购订单</label>
          <span class="daigou_zongPrice">188</span>
        </div>
        <ul class="shoppingCarTable_item_shop_select">
          <li><input type="checkbox" name="" value="" class="daigou_list_item select_list_item"></li>
          <li>
            <a href="#" class="shoppingCarTable_item_shop_pro">
              <img src="imgs/proItem.png" alt="">
            </a>
          </li>
          <li><span>淘宝或者地纳普淘宝或者地纳普淘宝或者地纳普</span></li>
          <li>
            <span class="shoppingCarTable_item_shop_pro_add"></span>
            <span>1</span>
            <span class="shoppingCarTable_item_shop_pro_remover"></span>
          </li>
          <li class="shoppingCarTable_item_shop_pro_price">￥<span>188</span></li>
        </ul>
        <ul class="shoppingCarTable_item_shop_select">
          <li><input type="checkbox" name="" value="" class="daigou_list_item select_list_item"></li>
          <li><a href="#" class="shoppingCarTable_item_shop_pro"><img src="imgs/proItem.png" alt=""></a>
          </li><li><span>淘宝或者地纳普淘宝或者地纳普淘宝或者地纳普</span></li>
          <li>
            <span class="shoppingCarTable_item_shop_pro_add"></span>
            <span>1</span>
            <span class="shoppingCarTable_item_shop_pro_remover"></span>
          </li>
          <li class="shoppingCarTable_item_shop_pro_price">￥<span>188</span></li>
        </ul>
      </div>
      <div class="shoppingCarTable_count">
        <p class="shoppingCarTable_count_select">
          已选<span class="shoppingCarTable_count_select_num">0</span>件商品
          <span class="shoppingCarTable_count_select_money">￥<span class="shoppingCarTable_count_select_money_count">0</span></span>
        </p>
        <button class="shoppingCarTable_count_select_money_btn">结算</button>
      </div>
      </div>
    </div>
  </div>
  <div class="addHtml_box">
    <div class="addHeader">
      <p class="artho">
        <span>南京:</span>
        <span>9°C</span>
        <span>良</span>
        <span>52</span>
        <span>返回</span>
        <span>12359.00</span>
        <span>余额:</span>
      </p>
    </div>
    <div class="addLogo">
      <img src="imgs/addLogo.png" alt="">
      <div class="addSearchBox">
        <img src="imgs/addSearch.png" alt="">
        <input type="text" placeholder="请输入您要搜索的内容" >
        <button class="addSearchBtn">搜索</button>
      </div>
      <ul class="searchList">
        <li><a href="javascript:;">春装</a></li>
        <li><a href="javascript:;">针织衫</a></li>
        <li><a href="javascript:;">野营装备</a></li>
        <li><a href="javascript:;">春装</a></li>
        <li><a href="javascript:;">针织衫</a></li>
        <li><a href="javascript:;">野营装备</a></li>
        <li><a href="javascript:;">小米手机</a></li>
        <p class="listLast">更多>></p>
      </ul>
      <div class="addShopping">
        <ul class="shopImg">
          <li><a href="#"><img src="imgs/taobao.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/tianmao.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/jingdong.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/mogujie.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/taobao.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/tianmao.png" alt=""></a></li>
          <ii><a href="#"><img src="imgs/jingdong.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/mogujie.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/taobao.png" alt=""></a></li>
          <li><a href="#"><img src="imgs/tianmao.png" alt=""></a></li>
        </ul>
        <ul class="shopText">
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <li><a href="">聚美优品</a></li>
          <p class="shopTextLast"><img src="imgs/xiala.png" alt=""></p>
        </ul>
      </div>
    </div>
    <div class="addCentent">
      <div class="addTab">
        <ul class="tabBox">
          <li class="tabBoxItem" v-for="(item,index) in titles" :class=" activeItem === index ? 'tabBoxItemOn':''" @click="activeItems(index)">
            <img :src="activeItem === index ? item.url:item.urls" alt="">
            {{item.name}}{{item.index}}
          </li>
          <button v-on:click="show = !show">
              Toggle
            </button>
            <transition name="fade">
              <p v-if="show">hello</p>
            </transition>
        </ul>
        <ul class="tabCentent">
          <li class="tabCententItem"v-for="(items,index) in content" :class=" activeItem === index ? 'tabCententItemOn':''">{{items.name}}</li>
        </ul>
      </div>
      <div class="advertising">
        <p></p>
        他们都在买
        <p></p>
      </div>
      <div class="projectList" >
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>9.80</span> <span class="ItemMoney_btn" pid="7"><img src="imgs/konggouwuche.png" alt=""></span></span></p>
            <!-- <p class="ItemMoney_btn"></p> -->
        </div>
        <div class="listItem" >
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>9.80</span><span class="ItemMoney_btn" pid="7"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span><span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span><span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span><span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span><span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span> <span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span> <span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列男款腕表防水商务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span><span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
        <div class="listItem">
            <img src="imgs/item1.png" alt="">
            <p class="Item_intro"><span class="Item_biaoshi">【同城】</span>海鸥手表 男士纤薄机械手表612国民系列商男款腕表防水务皮带男表</p>
            <p class="ItemMoney">￥<span>980</span> <span class="ItemMoney_btn"><img src="imgs/konggouwuche.png" alt=""></span></p>
        </div>
      </div>
    </div>
    <div class="addFooter">

    </div>
  </div>
  <script src="index.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
new Vue({
  el:'.addTab',
  data:{
    titles:[
      {name:'优惠1',url:'./imgs/youhui.png',urls:'./imgs/youhui1.png'},
      {name:'优惠2',url:'./imgs/youhui.png',urls:'./imgs/youhui1.png'},
      {name:'优惠3',url:'./imgs/youhui.png',urls:'./imgs/youhui1.png'},
      {name:'优惠4',url:'./imgs/youhui.png',urls:'./imgs/youhui1.png'},
      {name:'优惠5',url:'./imgs/youhui.png',urls:'./imgs/youhui1.png'},
    ],
    content:[
      {name:'优惠1'},
      {name:'优惠2'},
      {name:'优惠3'},
      {name:'优惠4'},
      {name:'优惠5'},
    ],
    activeItem : 0,
    show:true
  },


  methods:{
    activeItems:function(index){
      this.activeItem = index
    }
  }
})
</script>
</body>
</html>
